<template>
  <e-page
    :current="1"
    :total="100"
    :pageSize="10"
    :pageSizeOpts="[10,20,50]"
    @on-change="onChange"
    @on-page-size-change="onPageSizeChange"
  ></e-page>
  <div style="margin:20px 0;"><p>当前页码：<b>{{current}}</b></p><p>当前每页显示数目：<b>{{pageSizeParam}}</b></p></div>
  <e-page
    :current="1"
    :total="20"
    :pageSize="10"
    :pageSizeOpts="[10,20,50]"
  ></e-page>
  <br/>
  <e-page
    :current="1"
    :total="100"
    :pageSize="10"
    :pageSizeOpts="[10,20,50]"
    size="small"
  ></e-page>

  <page-md class="markdown-body"></page-md>

</template>

<script setup>
import pageMd from '../../docs/page.md';
import {ref} from 'vue'

// 当前页码

let current = ref(1)
let pageSizeParam = ref(10)


function onChange(page){
  current.value = page
}

function onPageSizeChange(pageSize){
  pageSizeParam.value = pageSize
}
</script>

<style scoped>

</style>
